<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :data="list" stripe border fit highlight-current-row style="width: 100%;">
      <el-table-column label="序号" type="index" align="center" width="60px" />
      <el-table-column label="商品名称" prop="productName" align="center" />
      <el-table-column label="商品价格	" prop="price" align="center" />
      <el-table-column label="上期结存数量" prop="lastRemainNum" align="center" />
      <el-table-column label="上期结存金额" prop="lastRemainPrice" align="center" />
      <el-table-column label="本期入库数量" prop="currentInNum" align="center" />
      <el-table-column label="本期入库金额" prop="currentInPrice" align="center" />
      <el-table-column label="本期出库数量" prop="currentOutNum" align="center" />
      <el-table-column label="本期出库价格" prop="currentOutPrice" align="center" />
      <el-table-column label="本期结存数量" prop="currentRemainNum" align="center" />
      <el-table-column label="本期结存金额" prop="currentRemainPrice" align="center" />
      <el-table-column label="创建日期" prop="createDate" align="center" />
    </el-table>
    <Pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
import { getStoreList } from '@/api/store'

export default {
  name: 'storeList',
  directives: { waves },
  props: {},
  components: {
    Pagination,
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        query$ignore: '',
      },
    }
  },
  computed: {},
  watch: {},
  methods: {
    getList() {
      this.listLoading = true
      getStoreList(this.listQuery).then(response => {
        this.list = response.list || []
        this.total = response.totalCount
        this.listLoading = false
      }).catch(error => {
        console.log(error);
        this.listLoading = false
      })
    },
  },
  created() {
    this.getList()
  },
  mounted() {

  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style lang='scss' scoped>
  
</style>